<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true">
      <p slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 新增权益
      </p>
      <p slot="extra" style="color: #999;font-size: 12px;">
        <label style="color: #FF3B30;">*</label> 为必填
      </p>

      <Form
        ref="formValidate2"
        :model="bloc.model"
        :rules="ruleValidate3"
        :label-width="111"

        style="padding:50px 10% 0 10%;width: 860px"
      >

        <FormItem label="权益名称:" prop="benefitname" required>
          <Input v-model="bloc.model.benefitname" placeholder="最多10个字" style="width: 400px" :maxlength="10"/>
        </FormItem>
        <FormItem label="权益说明:" prop="description" required>
          <Input v-model="bloc.model.description" placeholder="最多50个字" style="width: 400px" :maxlength="50"/>
        </FormItem>

        <FormItem label="权益图标:" prop="benefitIcon" required>
          <div class="demo-upload-list" v-for="(item, index) in fileList" :key="index">
            <template v-if="item.status1 === 'finished'">
              <img :src="item.benefitIcon">
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item.benefitIcon)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
          </div>
          <Upload
            ref="upload"
            :show-upload-list="false"
            :action="uploadAction"
            :max-size="2048"
            :format="['jpg','png','gif']"
            :headers="uploadHeaders"
            :on-format-error="handleFormatError1"
            :on-exceeded-size="handleMaxSize1"
            :on-success="handleSuccess"
            style="display: inline-block;width:58px;margin-left:15px"
          >
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
            <Modal title="View Image" v-model="visible">
              <img :src="imgUrl" v-if="visible" style="width: 100%">
            </Modal>
          </Upload>
          <p style="margin-left: 15px">支持 JPG、PNG、GIF格式，图片小于2M</p>
        </FormItem>

      </Form>
      <div style="margin: 20px 0px 35px 25px;">
        <Button style="width: 100px;height: 40px;" @click="handleCancel()">返回</Button>
        <AppButton
          ref="save"
          style="margin-left: 30px;width: 100px;height: 40px;"
          type="primary"
          :disabled="bloc.isDetail"
          @click="addModel('formValidate2')"
        >保存
        </AppButton>
      </div>
    </Card>
  </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {store} from '@/store/Store';
    import {baseUrl} from '@/base/Request';
    import {Route} from 'vue-router';
    import {FormBloc} from './AddBloc';
    import {isEmpty} from '@/base/util/Strings';
    import {AppButton} from '@/type/AppButton';

    @Component({
    })

    export default class extends Vue {
        disabled: boolean = true

        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next(vm => {
                // vm.bloc.getAllSort(1, 1000, 'ASC', 1);
                // vm.bloc.putDeviceModelGather()
            });
        }

        bloc = new FormBloc();

        get uploadHeaders() {

            return {
                'Authorization': 'Bearer ' + store.state.auth.accessToken
            }
        };

        get uploadAction() {
            return `${baseUrl}/api/upload/image`
        }

        imgUrl = '';
        visible = false;

        get fileList() {
            return this.bloc.fileList.map(x => {
                return {'name': 'name', 'benefitIcon': x, 'status1': 'finished'};
            });
        }

        handleView(url) {
            this.imgUrl = url;
            this.visible = true;
        }

        handleRemove(file) {
            this.bloc.fileList.splice(this.bloc.fileList.indexOf(file), 1);
        }

        ruleValidate3: any = {
            benefitname: [{required: true, message: '权益名称不能为空', trigger: 'blur'}],
            description: [{required: true, message: '权益说明不能为空', trigger: 'blur'}],
            benefitIcon: [
                {required: true, message: '权益图标不能为空', trigger: 'change'}
            ],

        };
        $refs!: {
            save: AppButton
            formValidate2: HTMLFormElement
        };
        enable = true;

        // 添加
        addModel(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.$refs.save.bloc.loading = true;

                    this.bloc.addModel(this.bloc.model).then(res => {
                        this.$Message.success('保存成功');
                        this.$refs.save.bloc.loading = false;
                        this.handleCancel();
                    }).catch(err => {
                        // this.$Message.error('保存失败');
                        this.$Message.error(err.message);
                        this.$refs.save.bloc.loading = false;
                    });
                }
            });
        }

        handleFormatError1(file) {
            // this.$Notice.warning({
            //   title: '文件格式不正确',
            //   desc: file.name + '文件格式不正确，请选择格式为 JPG、PNG格式的文件'
            // });
            this.$Message.error('请选择格式为JPG、PNG、GIF格式的文件')
        }

        handleMaxSize1(file) {
            this.$Message.error('图片大小不能超过2M')
        }

        handleSuccess(res, file) {
            this.bloc.model.benefitIcon = res.data[0]
            if (this.bloc.fileList.length > 0) {
                this.bloc.fileList = []
            }
            this.bloc.fileList.push(this.bloc.model.benefitIcon)
        }
        handleCancel() {
            this.$router.push({path: '/benefits'});
        }


    }
</script>

<style lang="less" scoped>
  /deep/ .ivu-form-item-content {
    display: flex !important;
    justify-content: start !important;
    align-items: center !important;
  }
  /deep/ .ivu-form-item-label {
    padding-top: 0px;
  }
</style>
